<template>
    <div class="page-banner">
        <div class="banner">
            
            <img class="img"
                 @click.self="handleBannerClick"
                 :src="bannerInfo.bannerImg"
                 alt="">
            <div class="banner-info">
                <div class="banner-text">
                <span>
                    <i class="iconfont ">&#xe665;</i>
                    <i>788</i>
                </span>
                </div>
                <div class="banner-title">{{bannerInfo.sightName}}</div>
            </div>
        </div>
        
        <!--图片画廊展示部分 FadeAnimation是过渡opacity组件 -->
        <FadeAnimation>
            <gallery :imgs="bannerInfo.gallaryImgs" v-if="showGallery"
                     @closeGallery="handleGalleryClose"
            ></gallery>
        </FadeAnimation>
  
    </div>
</template>

<script>
  import Gallery from '../../../components/Gallery/Gallery'
  import FadeAnimation from '@/components/FadeAnimation'
  
  
  export default {
    name: 'Banner',
    components: {
      Gallery,
      FadeAnimation,
    },
    data () {
      return {
        // swiperList: [
        //   {
        //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1508/a5/4003f9dd7bebf61eccbf64046e26d487.water.jpg_350x240_e11745bd.jpg',
        //   },
        //   {
        //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1501/ab/ab02fceb3fa0a60e.water.jpg_350x240_e7f0f154.jpg',
        //   }
        //   ,
        //   {
        //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1501/b6/b6ff667d5ed40895.water.jpg_350x240_7c0cbc70.jpg',
        //   },
        //   {
        //     imgUrl: 'http://img1.qunarzz.com/sight/p0/1508/89/895a1b7add84f23faca053ce9e3153db.water.jpg_350x240_5291130a.jpg',
        //   },
        // ],
        showGallery: false,
      }
    },
    methods: {
      handleBannerClick () {
        console.log(11)
        this.showGallery = true
      },
      handleGalleryClose () {
        this.showGallery = false
      },
    },
    props: {
      bannerInfo: Object,
    },
  }
</script>

<style scoped lang="stylus">
    .banner {
        overflow: hidden
        height: 0;
        padding-bottom: 55%;
        position: relative;
        .img {
            width: 100%;
        }
        
        .banner-info {
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
            padding: 0.3rem;
            .banner-text {
                margin-bottom: 0.1rem;
                background: rgba(0, 0, 0, .5);
                width: 1.2rem;
                border-radius: .2rem;
                text-align: center;
                span {
                    i {
                        font-size: .24rem;
                        margin-right: 0.1rem;
                    }
                }
            }
            .banner-title {
                font-size: 16px;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.70);
                
            }
        }
    }
</style>